<template>
	<view class="content bgc-f0">
		<view>
			<u-image :src="proDetail.cover" width="100%" height="360rpx"></u-image>
		</view>
		
		<view class="p20">
			<view class="bgc-fff br12 p26">
				<view class="z-flex z-flex-between">
					<view><text class="c-333">{{proDetail.name}}</text></view>
					<view class="c-red">
						<text class="fs24">￥</text>
						<text class="fs30 ml6 fwb">{{proDetail.price}}</text>
					</view>
				</view>
				<view class="mt15 fs26">
					<text>{{proDetail.unit}}</text>
				</view>
			</view>
			
<!-- 			<view class="mt20 br12 p26 z-flex z-flex-between bgc-fff" @click="handShowPay">
				<text class="fs26 c-333">选择套餐</text>
				<u-icon name="arrow-right" color="#999999" size="20" style="position: relative;top:-2rpx;"></u-icon>
			</view> -->
			
			<view class="p30 bgc-fff mt20 br12">
				<view class="c-theme t-c mb30">-<text class="ml10 mr10 fs26">商品详情</text>-</view>
				<template v-for="(it,ind) in proDetail.detail">
					<u-image :src="it" mode="widthFix" :key="ind"></u-image>
				</template>
			</view>
		</view>
		
		<footerBottom>
			<view class="_pay" @click="handShowPay">
				立即购买
			</view>
		</footerBottom>
		
		<u-popup v-model="show" mode="bottom" safe-area-inset-bottom="true" closeable="true" border-radius="12">
			<view class="p30">
				<view><text>{{proDetail.name}}</text></view>
				<view class="z-flex z-flex-between z-flex-align-c mt30">
					<text class="fs24 c-333">已选定：{{proDetail.unit}}</text> 
<!-- 				<text style="margin-left: auto;" class="c-red fs24">￥</text>
				<text class="fs30 ml6 fwb c-red">{{showPack.money}}</text> -->
				</view>
<!-- 				<view class="mt20"><text class="fs24 c-999">套餐</text></view>
				<view class="mt20 z-flex z-flex-between">
					<template v-for="(it,ind) in packageList">
						<view :key="ind" :class="['_pack',currentIndex === ind?'_pack_show':'']" @click="handClickPack(it,ind)">
							<text>{{it.name}}</text>
						</view>
					</template>
				</view> -->
<!-- 				<view class="mt20 z-flex" style="align-items: flex-start;">
					<u-icon name="info-circle" color="#f0932b" size="26" style="position: relative;top: 6rpx;"></u-icon>
					<view class="ml10"><text class="fs24 c-999">您如果购买后需退还，请联系店铺协商后进行退款，具体退款方法请参见用户协议！</text></view>
				</view> -->
			</view>
			<view class="_line"></view>
			<view class="z-flex z-flex-between z-flex-align-c p30">
				<view><text class="mr10">支付：</text><text class="c-red fs24">￥</text><text class="fs30 ml6 fwb c-red">{{proDetail.price}}</text></view>
				<!-- <view class="_submit" @click="handPay">立即购买</view> -->
				<u-button
					:loading="loading"
					:disabled="loading"
					type="success" 
					:custom-style="customStyle" 
					shape="circle"
					size="medium"
					@click="handPay"
				>
					立即购买
				</u-button>
			</view>
			
		</u-popup>
	</view>
</template>

<script>
	import { getProDetailApi, changeBusinessApi, getOneApi } from '@/api/shop.js'
	import { generateApi } from '@/api/order.js'
	import { getQueryString } from '@/libs/function.js'
	import { businessMemberApi, getBusinessMemberApi } from '@/api/user.js'
	export default{
		data(){
			return {
				option:{},
				proDetail:{},
				show: false,
				showPack: {},
				packageList: [
					{name: '全身疗程',money: 4980},{name: '局部疗程',money: 3980}
				],
				customStyle: {
					background: '#23bbb3',
					width: '200rpx'
				},
				loading: false,
				currentIndex: 0,
				storeInfo: {}
			}
		},
		onLoad(option){
			option && (this.option = option)
		},
		onShareAppMessage(res) {
			const userId = uni.getStorageSync('userId')
			const businessId = uni.getStorageSync('businessId')
			if (res.from === 'menu') {
				return {
					title: `${this.storeInfo.name}-${businessId}-${this.proDetail.name}`,
					path: `/mapPages/shop_detail/index?userId=${userId}&businessId=${businessId}&id=${this.option.id}`,
					imageUrl: this.proDetail.cover
				}
			}
		},
		onShareTimeline(res) {
			const userId = uni.getStorageSync('userId')
			const businessId = uni.getStorageSync('businessId')
			if (res.from === 'menu') {
				return {
					title: `聚梦成客连连-${this.storeInfo.name}-${businessId}-${this.proDetail.name}`,
					query: `path?userId=${userId}&businessId=${businessId}&id=${this.option.id}`,
					imageUrl: this.proDetail.cover
				}
			}
		},
		async onShow(){
			await this.$onLaunched
			this.getProDetail()
			this.getMember()
			/* 缓存所需的门店ID、邀请人ID */
			const { businessId, userId } = this.option
			if(businessId && userId){
				uni.setStorageSync('userUrl',`https?a=${userId}&b=${businessId}`)
				uni.setStorageSync('businessId',Number(businessId))
			}
			const openId = uni.getStorageSync('openid')
			if(businessId && userId && openId){
				// 成为店小二、改变门店
				this.userAuth(userId,businessId)
				this.changeStore(businessId)
			}
		},
		methods:{
			async getProDetail(){
				uni.showLoading({
					title: '数据加载中...'
				})
				const { id } = this.option
				const {code,data} = await getProDetailApi({ id })
				uni.hideLoading()
				uni.stopPullDownRefresh()
				if(code != 0) return
				this.getStoreDetail(data.businessId)
				this.proDetail = data
				this.proDetail.detail = data.detail.split(',')
			},
			// 获取门店信息
			async getMember(){
				const memberId = Number(uni.getStorageSync('userId'))
				if(!memberId) return
				const {code,data} = await getBusinessMemberApi({memberId})
				if(code != 0) return
				if(data.list.length == 0){
					uni.showModal({
						title: '提示',
						content: '如果您想分享，请联系商家成为店小二'
					})
				}else{
					uni.showShareMenu({
						menus: ['shareAppMessage','shareTimeline'],
					})
				}
			},
			// 获取门店详情
			async getStoreDetail(id){
				const businessId = uni.getStorageSync('businessId')
				const {code, data} = await getOneApi({id: Number(businessId) || id})
				if(code == 0){
					this.storeInfo = data
				}
			},
			// 成为店小二
			async userAuth(c,b){
				const {code, data} = await businessMemberApi({
					memberId: Number(uni.getStorageSync('userId')),
					businessId: Number(b),
					inviteId: Number(c)
				})
			},
			// 改变门店
			async changeStore(a){
				const {code,data} = await changeBusinessApi({
					businessId: Number(a),
					userId: Number(uni.getStorageSync('userId'))
				})
			},
			handShowPay(){
				this.show = true
			},
			async handPay(){
				const openId = uni.getStorageSync('openid')
				if(!openId){
					return uni.$u.route({
						type: 'navigateTo',
						url: 'pages/login/index'
					})
				}
				const url = uni.getStorageSync('userUrl')
				const customId = getQueryString(url,'a')
				// 添加bussinessId
				// const businessIdStorge = getQueryString(url,'b')
				const businessId = uni.getStorageSync('businessId')
				const query = this.option.businessId?this.option.businessId:businessId
				const params = {
					userId: Number(uni.getStorageSync('userId')),
					productId: Number(this.option.id),
					businessId: Number(query)
				}
				if(customId){
					params.inviteId = Number(customId)
				}
				
				if(params.inviteId){
					if(this.option.businessId && Number(this.option.businessId) != businessId){
						delete params.inviteId
					}
				}
				this.loading = true
				const {code,data} = await generateApi(params)
				this.loading = false
				if(code != 0) return
				const { appId,path,payOrderId } = data.payInfo
				uni.navigateToMiniProgram({
					appId,
					path: path+'?pay_order_id='+payOrderId+'&s=wx_lite',
					extraData: {
					},               
					fail(res) {
						if(res?.errMsg === 'navigateToMiniProgram:fail cancel') return;
						uni.showToast({
							title: res.errMsg,
							icon: 'none',
						});
					},
					success(res) {
						uni.$u.route({
							type: 'redirectTo',
							url: 'mapPages/order/index',
							params: {
								id: 0
							}
						})
					},
				})
				
			},
			handClickPack(it,ind){
				this.showPack = it
				this.currentIndex = ind
			}
		}
	}
</script>

<style scoped lang="scss">
	.content{
		._submit,._pay{
			padding: 16rpx;
			background-color: $uni-color-theme;
			color: #FFFFFF;
			text-align: center;
			border-radius: 40rpx;
		}
		._pay{
			width: 88%;
			margin: 0 auto;
			position: relative;
			top: 50%;
			transform: translateY(-50%);
		}
		._submit{
			width: 200rpx;
		}
		
		._pack{
			border-radius: 40rpx;
			padding: 14rpx 20rpx;
			width: 49%;
			text-align: center;
			font-size: 22rpx;
			color: #333333;
			border: 1px solid #B9B9B9;
		}
		
		._pack_show{
			border-color: $uni-color-theme !important;
			color: $uni-color-theme !important;
		}
		
		._line{
			border-top: 1rpx solid #F0F0F0;
		}
	}
</style>
